import React, { Component } from 'react';
import styles from './index.less';
import normal from '@/assets/normal.svg';
class AirConditions extends Component {
  constructor(props) {
    super(props);
    this.state = {
      info: [],
    };
  }
  componentDidMount() {
    if (this.state.info.length) {
      this.swiper = new window.Swiper('.swiper-container', {
        autoplay: true,
        direction: 'vertical',
        loopdSlides: 10,
        slidesPerView: 'auto',
        speed: 1000,
        loop: true,
        autoHeight: true,
      });
    }
    window.addEventListener('resize', () => {
      this.swiper.update();
    });
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps?.data && nextProps.data.length > 0) {
      this.setState(
        {
          info: nextProps.data,
        },
        () => {
          if (!this.swiper) {
            this.swiper = new window.Swiper('.swiper-container', {
              autoplay: true,
              direction: 'vertical',
              loopdSlides: 10,
              slidesPerView: 'auto',
              speed: 1000,
              loop: true,
              autoHeight: true,
            });
          } else {
            this.swiper.update();
          }
        },
      );
    }
  }
  render() {
    const { info } = this.state;
    return (
      <div className={styles.airConditioner}>
        <div className={styles.title}>
          <img src={normal} alt="" />
          空调
        </div>
        <ul className={styles.list}>
          <div className="swiper-container swiper-air">
            <div className="swiper-wrapper">
              {info &&
                info.map((item, index) => {
                  return (
                    <li key={index} className="swiper-slide">
                      <span>{item.name}</span>
                      <span className={styles.tem}>
                        {item.temperature === '' ? '-' : item.temperature}
                      </span>
                      <span
                        className={
                          item.working_status == 1 ? styles.sign : styles._sign
                        }
                      >
                        {item.working_status == 1
                          ? '已开启'
                          : item.working_status == 2
                          ? '已关闭'
                          : '-'}
                      </span>
                    </li>
                  );
                })}
            </div>
          </div>
        </ul>
      </div>
    );
  }
}
export default AirConditions;
